<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>轮播图示例</title>
  <style>
    #main{
      height: 960px;
      width: 960px;
      border: 2px solid;
      overflow: hidden;
    }
    #img-list{
      width: 3840px;
      height: 960px;
      display: flex;
      /*float: left;*/

    }
    ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #img-list img {
      width: 960px;
      height: 960px;
    }


  </style>
</head>

<body>
<div id="main">
  <ul id="img-list">
    <li><img src="1.jpeg" alt=""></li>
    <li><img src="2.jpeg" alt=""></li>
    <li><img src="3.png" alt=""></li>
    <li><img src="1.jpeg" alt=""></li>
  </ul>
</div>
<script>
  run()
  var timer;
  var move=0;
  function run(){
    if(move <= -2880){
      move=0;
    }
    document.getElementById("img-list").style.marginLeft = move + 'px';

    var n = (move % 960 == 0)? n=1200 : n=10;
    move -= 10;
    timer = setTimeout(run,n);

  }
</script>
</body>
</html>